<template>
  <div class="app-container">
    <div class="filter-container">
      <span class="filter-title filter-item">饰品品质</span>
      <k-select
        v-model="listQuery.rarityId"
        class="filter-item babyquality"
        :custom-params="{
          opations: categoryData.qualityList,
          label: 'lineName',
          value: 'lineId',
        }"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">饰品外观</span>
      <k-select
        v-model="listQuery.exteriorId"
        class="filter-item babylook"
        :custom-params="{
          opations: categoryData.exteriorList,
          label: 'lineName',
          value: 'lineId',
        }"
        @handleSelectEvent="handleFilter"
      />
      <!-- 动态数据 需要获取 -->
      <span class="filter-title filter-item">饰品分类</span>
      <k-select
        v-model="listQuery.categoryId"
        class="filter-item babycategory"
        :custom-params="{opations:categoryList, label:'lineName',value:'lineId'}"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">饰品类别</span>
      <k-select
        v-model="listQuery.qualityId"
        class="filter-item openbox-name"
        :custom-params="{
          opations: categoryData.typeList,
          label: 'lineName',
          value: 'lineId',
        }"
        @handleSelectEvent="handleFilter"
      />

      <k-input
        v-model.trim="listQuery.key"
        class="filter-item"
        is-search
        placeholder="饰品名称或关键词"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>
    <div class="top-right-btn-container">
      <k-button
        v-if="authorityHandle(155)"
        class="top-btn"
        value="手动刷新"
        @click.native="manualRefresh"
      />

      <k-button class="top-right-btn" value="设置" @click.native="rangeSettingDialog" />
    </div>
    <!--表格相关 -->
    <el-table
      :data="babylist"
      fit
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{background:'#F6F5FA',color:'#4E4F62'}"
      @sort-change="sortChange"
    >
      <el-table-column width="60px" type="index" label="序号" align="center" />
      <el-table-column min-width="120px" label="图标" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 110px; height: 80px"
            :src="scope.row.iconUrl"
            fit="contain"
            :preview-src-list="[scope.row.iconUrl]"
          />
        </template>
      </el-table-column>

      <el-table-column prop="goodsCnName" min-width="200px" label="饰品名称" show-overflow-tooltip align="center" />
      <el-table-column label="扎比特数据" show-overflow-tooltip align="center">
        <el-table-column prop="zbtMinPrice" label="最低价(R)" min-width="80" sortable="custom" align="center" />
        <el-table-column prop="zbtSellNum" label="当前数量" min-width="100" sortable="custom" align="center" />
        <el-table-column prop="zbtOfficialPrice" label="参考价(R)" min-width="80" sortable="custom" align="center" />
      </el-table-column>
      <!-- <el-table-column label="IGEX数据" show-overflow-tooltip align="center">
        <el-table-column prop="buffMinPrice" label="最低价" min-width="80" sortable="custom" align="center" />
        <el-table-column prop="buffSellNum" label="当前数量" min-width="100" sortable="custom" align="center" />
        <el-table-column prop="buffOfficialPrice" label="参考价" min-width="80" sortable="custom" align="center" />
      </el-table-column> -->
      <el-table-column label="悠悠数据" show-overflow-tooltip align="center">
        <el-table-column prop="uuMinPrice" label="最低价(R)" min-width="80" sortable="custom" align="center" />
        <el-table-column prop="uuSellNum" label="当前数量" min-width="100" sortable="custom" align="center" />
        <el-table-column prop="uuOfficialPrice" label="参考成本(R)" min-width="100" sortable="custom" align="center" />
      </el-table-column>
      <el-table-column label="IO数据" show-overflow-tooltip align="center">
        <el-table-column prop="ioMinPrice" label="最低价(R)" min-width="80" sortable="custom" align="center" />
        <el-table-column prop="ioSellNum" label="当前数量" min-width="100" sortable="custom" align="center" />
        <el-table-column prop="ioOfficialPrice" label="参考成本(R)" min-width="100" sortable="custom" align="center" />
      </el-table-column>
      <el-table-column label="V5Item数据" show-overflow-tooltip align="center">
        <el-table-column prop="v5MinPrice" label="最低价(R)" min-width="80" sortable="custom" align="center" />
        <el-table-column prop="v5SellNum" label="当前数量" min-width="100" sortable="custom" align="center" />
        <el-table-column prop="v5OfficialPrice" label="参考成本(R)" min-width="100" sortable="custom" align="center" />
      </el-table-column>
      <el-table-column prop="customPrice" min-width="100px" sortable="custom" label="自定义价格(R)" show-overflow-tooltip align="center" />
      <el-table-column prop="rarityName" min-width="100px" label="品质" show-overflow-tooltip align="center" />
      <el-table-column prop="exteriorName" min-width="150px" label="外观" show-overflow-tooltip align="center" />
      <el-table-column prop="categoryName" min-width="150px" label="分类" show-overflow-tooltip align="center" />
      <el-table-column prop="qualityName" min-width="150px" label="类别" show-overflow-tooltip align="center" />
      <el-table-column prop="remark" min-width="100px" label="备注" show-overflow-tooltip align="center" />
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />

    <!-- 设置阈值百分比 弹窗 -->
    <k-dialog
      :show-hide.sync="rangeSetting.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="setting_dialog"
      title="设置阈值"
      :two-btn="authorityHandle(155)"
      :close-fun="rangeSettingClose"
      @click="rangeSettingSave"
    >

      <el-radio-group v-model="settingType" fill="#3b425d" text-color="#ffffff" class="top-radio-group">
        <el-radio-button label="zbtsetting">扎比特</el-radio-button>
        <!-- <el-radio-button label="skssetting">skinsbus</el-radio-button> -->
        <!-- <el-radio-button label="igxesetting">IGEX</el-radio-button> -->
      </el-radio-group>
      <div class="dialog-warningSetting">
        <div v-if="settingType === 'zbtsetting'" class="ration_div">
          <el-form label-width="150px">
            <el-form-item label="设置阈值百分比：">
              <el-input v-model="formRangePercentData" :readonly="!authorityHandle(155)" placeholder="请输入数值" />
            </el-form-item>
          </el-form>
        </div>
        <div v-if="settingType === 'igxesetting'" class="ration_div">
          <el-form label-width="150px">
            <el-form-item label="设置阈值百分比：">
              <el-input v-model="igxePercentData" :readonly="!authorityHandle(155)" placeholder="请输入数值" />
            </el-form-item>
          </el-form>
        </div>

        <!--        <ul v-if="settingType === 'skssetting'">
          <li v-for="(sksSettingItem, index) in sksSettingArray" :key="sksSettingItem.id">
            <span class="warning-title">{{ index+1 }}阶价值区间：</span>
            <el-input :readonly="!authorityHandle(155)" v-model="sksSettingItem.minPrice" class="price-input" />
            <i style="margin: 0 3px;"> — </i>
            <el-input :readonly="!authorityHandle(155)" v-model="sksSettingItem.maxPrice" class="price-input" />

            <span class="warning-title-right">参考百分比：</span>
            <el-input :readonly="!authorityHandle(155)" v-model="sksSettingItem.percent" clearable />
            <i v-if="authorityHandle(155)" v-show="index != 0" class="el-icon-remove" @click="removesksSettingItem(sksSettingItem.id)" />
            <i v-if="authorityHandle(155)"
              v-show="index === sksSettingArray.length-1"
              class="el-icon-circle-plus"
              @click="addsksSettingItem"
            />
          </li>
        </ul> -->
      </div>
    </k-dialog>

  </div>
</template>

<script>
import { getList, refresh, getCategoryList, settingPercent, getPercent, settingIgxePercent, getIgxePercent } from '@/api/babylib/marketlib/listdata'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {
  getCategoryQualityList,
  getCategoryExteriorList,
  getCategoryTypeList
} from "@/api/babylib/platformlib/listdata";
export default {
  components: { Pagination },
  dicts: ['ORNAMENT_QUALITY', 'ORNAMENT_APPEARANCE', 'ORNAMENT_CATEGORY'],
  data() {
    return {
      sksSettingArray: [
        {
          id: undefined,
          minPrice: '',
          maxPrice: '',
          percent: undefined
        }
      ],
      settingType: 'zbtsetting',
      formRangePercentData: '',
      igxePercentData: '',
      categoryList: [],
      totalRows: 0, // 分页组件--数据总条数
      babylist: [], // 表格的数据
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        categoryId: undefined, // 饰品分类,
        exteriorId: undefined, // 饰品外观',
        qualityId: undefined, // 饰品类别',
        rarityId: undefined, // 饰品品质',
        key: '' // 饰品名称'
      },
      timeValue: '',
      rangeSetting: {
        showHide: false
      },
      categoryData:{
        qualityList:[],
        exteriorList:[],
        typeList:[]
      }
    }
  },
  created() {
    this.loadData()
    this.getCategory()
    this.init();
  },
  methods: {
    init(){
      this.initCategoryQualityList()
      this.initCategoryExteriorList()
      this.initCategoryTypeList()
    },
    async initCategoryQualityList(){
      const res = await getCategoryQualityList()
      if(res.status === 200){
        this.categoryData.qualityList = res.data
      }
      
    },
    async initCategoryExteriorList(){
      const res = await getCategoryExteriorList()
      if(res.status === 200){
        this.categoryData.exteriorList = res.data
      }
    },
    async initCategoryTypeList(){
      const res = await getCategoryTypeList()
      if(res.status === 200){
        this.categoryData.typeList = res.data
      }
    },
    loadData() {
      getList(this.listQuery).then(res => {
        const data = res.data
        this.babylist = data.rows
        this.totalRows = data.totalRows
      })
    },
    // 获取饰品分类
    getCategory() {
      getCategoryList().then(res => {
        const data = res.data
        this.categoryList = data
        this.$log('getCategoryList请求数据： ' + this.categoryList)
      })
    },
    // 手动刷新
    manualRefresh() {
      this.$confirm('确定手动爬取吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        refresh().then(res => {
          this.$message.success('刷新程序正在后台执行，请稍后')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    removesksSettingItem(value) {
      const index = this.sksSettingArray.findIndex(function(item) {
        return item.id === value
      })
      if (index !== -1) {
        this.sksSettingArray.splice(index, 1)
      }
    },
    addsksSettingItem() {
      this.sksSettingArray.push({
        id: undefined,
        minPrice: '',
        maxPrice: '',
        percent: undefined
      })
    },
    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.loadData()
    },
    // 设置阈值百分比弹窗
    rangeSettingDialog() {
      this.rangeSettingGet()

      this.rangeSetting.showHide = true
    },
    // 保存百分比
    rangeSettingSave() {
      if (this.settingType === 'zbtsetting') {
        settingPercent({ percent: this.formRangePercentData }).then(res => {
          this.$message.success('设置成功！')
        })
      } else {
        // setGoodsOfficialPercentList(this.sksSettingArray).then(res => {
        //   this.$message.success('设置成功！')
        // })
        settingIgxePercent({ percent: this.igxePercentData }).then(res => {
          this.$message.success('设置成功！')
        })
      }
      this.rangeSetting.showHide = false
    },
    // 获取百分比
    rangeSettingGet() {
      getPercent().then((res) => {
        this.formRangePercentData = res.data
      })

      getIgxePercent().then(res => {
        this.igxePercentData = res.data
      })

      // getGoodsOfficialPercentList().then(res => {
      //   this.sksSettingArray = res.data
      // })
    },
    rangeSettingClose() {
      this.$resetForm(this.formRangePercentData)
    },
    // 表格的排序条件发生变化的时候会触发该事件
    sortChange(column, prop, order) {
      this.listQuery.sort = column.prop
      if (column.order === 'ascending') {
        this.listQuery.direction = 'asc'
      } else if (column.order === 'descending') {
        this.listQuery.direction = 'desc'
      }
      this.loadData()
    }
  }

}
</script>
<style lang="scss" scoped>
$menuText:#14162E; // 侧边栏字体颜色
$hoverColor:#1D143C;// 鼠标停留主色调浅色
$mainColor:#3b425d;// 主色调
.app-container{
  padding: 30px;
}
.filter-container {
  margin-bottom: 0px;
  width: 100%;
  height: 48px;
  line-height: 48px;
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
  .kInput{
    position:absolute;
    right: 20px;
  }
  .filter-title{
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162E;
  }
  .babyquality {
    margin-right: 20px;
  }
  .babylook,.babycategory{
    margin-right: 20px;
  }
}
.top-btn{
  margin: 30px 0px 30px 0px;
  font-size: 14px;
  color: #ffffff;
}
.kSelect .el-select .el-input .el-input__inner{
  width: 124px;
}

::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: $mainColor;
}
::v-deep .el-input__inner:focus {
    border-color: $mainColor;
}

.top-right-btn-container{
  height: 100px;
  position: relative;
  .top-right-btn{
    position: absolute;
    right: 20px;
    top: 30px;
    background-color: #F8F7FB;
    border-color: transparent;
    color: #14162E;
    &:hover{
      color: #ffffff;
      background-color: $mainColor;
    }
    &:active{
      color: #14162E;
    }
  }
}
.top-radio-group{
  margin-bottom: 40px;
}
ul {
  list-style-type:none;
  margin:0;
  padding:0;
  li{
    margin: 0 0 30px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    .warning-title {
      font-size: 16px;
      color: #14162E;
      &-right{
        font-size: 16px;
        color: #14162E;
        margin-left: 80px;
      }
      &-right2{
        font-size: 16px;
        color: #14162E;
        margin-left: 20px;
      }
    }
    i{
      color: #D1D5DD;
    }
  }
}
::v-deep .el-radio-button__inner{
  &:hover{
    color: $mainColor;
  }
}
.dialog-warningSetting{
  ::v-deep.el-input{
    width: 110px;
  }
  .price-input{
    width: 120px;
  }
  .el-icon{
    &-circle-plus, &-remove{
      font-size: 22px;
      color:#3b425d;
      margin-left: 10px;

   }
  }
}
.setting_dialog{
 ::v-deep .el-dialog__body{
    width: 900px;
  }
   .ration_div{
     display: flex;
     justify-content: center;
  }
}
</style>
